<script lang="ts" setup>
	import { ref } from 'vue'
	import { creatOrderApi, orderPayApi, preOrderApi } from '@/apis/consult'
	import { useConsultStore } from '@/stores/consult'
	import type { OrderPreData } from '@/types/consult.d.ts'
	import type { PatientList } from '@/types/patient.d.ts'
	import { patientDetailApi } from '../../apis/patient'

	// 	仓库数据
	const store = useConsultStore()
	//订单数据
	const info = ref({} as OrderPreData)
	const createPreOrder = async () => {
		const res = await preOrderApi({
			illnessType: store.illnessType,
			type: store.type,
			useCoupon: '0',
		})
		// console.log(res)
		info.value = res
	}
	createPreOrder()

	//患者信息

	const PatientInfo = ref({} as PatientList)
	const getInfo = async () => {
		const res = await patientDetailApi(store.patientId)
		PatientInfo.value = res
	}

	getInfo()
	//渲染用户信息
	const renderPatientInfo = () => {
		return (
			PatientInfo.value.name +
			' | ' +
			PatientInfo.value.age +
			' | ' +
			PatientInfo.value.genderValue
		)
	}

	//创建订单Id
	const orderId = ref('')
	const paypop = ref()
	//创建待支付订单
	const creatOrder = async () => {
		const res = await creatOrderApi({
			illnessDesc: store.illnessInfo.illnessDesc,
			pictures: store.illnessInfo.pictures,
			consultFlag: store.illnessInfo.consultFlag,
			illnessTime: store.illnessInfo.illnessTime,
			illnessType: store.illnessType,
			type: store.type,
			patientId: store.patientId,
			depId: store.depId,
		})
		// console.log(res)
		orderId.value = res.id
		//清除信息
		//可以在这里直接一个一个的清除  还可以直接在仓库里面定义一个方法,然后在需要清除的地方调用(推荐)
		store.Clear()
		//打开弹窗
		paypop.value.open()
	}

	//点击 x  关闭弹窗
	const closeFunc = () => {
		uni.showModal({
			title: '提示',
			content: '现在离开,需要重新预约医生呦~',
			cancelText: '再看看',
			confirmText: '确定要走',
			showCancel: true,
			success: (e) => {
				if (e.confirm === true) {
					// paypop.value.close()
					//跳转到指定的页面(清除历史记录)
					uni.reLaunch({
						// 开头没有/ 会当做相对路径进行拼接
						url: '/subpkg_consult/room/room',
					})
					paypop.value.close()
				}
			},
		})
	}

	//点击立即支付
	const payOnce = (payType: number) => {
		if (payType === 0) {
			alipay()
		} else if (payType === 1) {
			uni.showToast({
				title: '暂不支持微信支付',
			})
			uni.hideLoading()
		}
	}

	const alipay = async () => {
		const res = await orderPayApi({
			orderId: orderId.value,
			paymentMethod: '1',
			//在其他环境的时候  只需要修改这个就可以
			payCallback: 'http://localhost:5173/#/subpkg_consult/room/room',
		})
		const { payUrl } = res
		//浏览器跳转到指定的页面
		window.location.href = payUrl
	}
</script>

<template>
	<scroll-page>
		<view class="payment-page">
			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				:title="`图文问诊${info.payment || '0'}元`"
			>
				<uni-list :border="false">
					<uni-list-item
						title="极速问诊"
						note="自动分配医生"
						thumb="/static/uploads/doctor-avatar.jpg"
						thumb-size="lg"
					/>
					<uni-list-item
						title="优惠券"
						show-arrow
						:right-text="`-¥${info.pointDeduction || '0'}`"
					/>
					<uni-list-item title="积分抵扣">
						<template #footer>
							<view class="uni-list-text-red">-¥{{ info.couponDeduction }}</view>
						</template>
					</uni-list-item>
					<uni-list-item title="实付款">
						<template #footer>
							<view class="uni-list-text-red">¥{{ info.actualPayment }}</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>

			<view class="dividing-line"></view>

			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				title="患者资料"
			>
				<uni-list :border="false">
					<uni-list-item title="患者信息">
						<template #footer>
							<view class="uni-list-text-gray"> {{ renderPatientInfo() }}</view>
						</template>
					</uni-list-item>
					<uni-list-item border title="病情描述" :note="store.illnessInfo.illnessDesc" />
				</uni-list>
			</uni-section>

			<!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
		</view>
		<!-- 下一步操作 -->
		<view class="next-step">
			<view class="total-amount">
				合计: <text class="number">¥{{ info.actualPayment }}</text>
			</view>
			<button @tap="creatOrder" class="uni-button">立即支付</button>
		</view>
	</scroll-page>
	<custom-payment
		@close="closeFunc"
		ref="paypop"
		:amount="info.actualPayment"
		:orderId="orderId"
		@confirm="payOnce"
	></custom-payment>
</template>

<style lang="scss">
	@import './index.scss';
</style>
